//4.6 Layout Items

//Layout.qml
import QtQuick 2.9

DarkSquare {
    id: root
    width: 800; height: 600
    Grid {
        rows: 2
        columns: 3
        spacing: 8
        //填充父元素
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                width: 12
                anchors.fill: parent
                anchors.margins: 8
                Text {
                    anchors.centerIn: parent
                    text: "(1)"
                }
            }
        }
        //左对齐父元素
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                width: 48
                y: 8
                anchors.left: parent.left
                anchors.leftMargin: 8
                Text {
                    anchors.centerIn: parent
                    text: "(2)"
                }
            }
        }
        //元素左边与父元素右边对其
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                width: 48;
                anchors.left: parent.right
                Text {
                   anchors.centerIn: parent
                    text: qsTr("3")
                }
            }
        }
        //元素中间对齐
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                id: blue1
                width: 48
                y: 8
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                   anchors.centerIn: parent
                    text: qsTr("4")
                }
            }
            BlueSquare {
                id: blue2
                width: 96
                y: 64
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                   anchors.centerIn: parent
                    text: qsTr("4")
                }
            }
        }
        //元素在父元素中居中
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                anchors.centerIn: parent
                Text {
                    anchors.centerIn: parent
                    text: qsTr("5")
                }
            }
        }
        //元素水平方向居中对齐父元素，并向后偏移12像素,垂直方向居中对齐
        GreenSquare {
            width: 200; height: 180
            BlueSquare {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -12
                anchors.verticalCenter: parent.verticalCenter
                Text {
                    anchors.centerIn: parent
                    text: qsTr("6")
                }
            }
        }
    }
}
